<template>
  <div class="data-center">
    <el-tabs v-model="activeTab" class="custom-tabs">
      <el-tab-pane label="功图数据" name="chart">
        <ChartTab :currentDevice="currentDevice" />
      </el-tab-pane>

      <el-tab-pane label="全部数据" name="all">
        <AllDataTab :currentDevice="currentDevice" />
      </el-tab-pane>

      <el-tab-pane label="登录记录" name="login">
        <LoginRecordTab :currentDevice="currentDevice" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useDeviceStore } from '@/stores/deviceStore'
import ChartTab from './DataCenter/ChartTab.vue'
import AllDataTab from './DataCenter/AllDataTab.vue'
import LoginRecordTab from './DataCenter/LoginRecordTab.vue'

const deviceStore = useDeviceStore()
const currentDevice = computed(() => deviceStore.currentDevice)

const activeTab = ref('chart')

// 监听标签页变化
watch(activeTab, (newTab) => {
  // 标签页切换逻辑可以在这里处理
})
</script>

<style scoped>
.data-center {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.custom-tabs {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #f5f7fa;
}
</style>